﻿@using PMS.Web.Models.Customers
@{
    ViewData["Title"] = "密码重置";
}
@model ChangePasswordModel
@section CssLinks{
    <link href="~/lib/PearAdminLayui/component/pear/css/pear.css" rel="stylesheet" />
}
@section CssStyles{
    <style type="text/css">
        .message-error {
            margin: 15px;
            width: 80%;
            margin-left: 8%;
            color: #dc3545;
        }

        .layui-form-label {
            width: 120px !important;
        }

        .layui-input-inline {
            width: 280px !important;
        }

        .pw-strength {
            position: relative;
            top: 8px;
        }

        .pw-bar {
            float: left;
            width: 62px;
            height: 4px;
            margin-top: 5px;
            margin-left: 5px;
            font-size: 0px;
        }

        .pw-default {
            background: #d6d3d3;
        }

        .pw-weak {
            background: #ff3300 !important;
        }

        .pw-medium {
            background: #099 !important;
        }

        .pw-strong {
            background: #060 !important;
        }

        .pw-txt {
            padding-top: 2px;
            width: 220px;
            overflow: hidden;
        }

        .pw-txt span {
            color: #707070;
            float: left;
            font-size: 12px;
            text-align: center;
            width: 66px;
            margin-right: 2px;
        }
    </style>
}

<div class="pear-container">
    <div class="layui-card layui-form">
        <div class="layui-card-header">
            <h3>用户密码重置</h3>
        </div>
        <div class="layui-card-body">
            <div asp-validation-summary="ModelOnly" class="message-error"></div>
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.OldPassword)</label>
                <div class="layui-input-inline">
                    <input type="password" name="@Model.NameOf(m => m.OldPassword)" lay-verify="required" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">请输入您的账号原密码</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.NewPassword)</label>
                <div class="layui-input-inline">
                    <input type="password" id="newPassword" name="@Model.NameOf(m => m.NewPassword)" lay-verify="required" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">请输入您的账号新密码并妥善保管</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码强度</label>
                <div id="level" class="layui-input-inline pw-strength">
                    <div class="pw-bar pw-default" id='pwdLevel_weak'> </div>
                    <div class="pw-bar pw-default" id='pwdLevel_medium'> </div>
                    <div class="pw-bar pw-default" id='pwdLevel_strong'> </div>
                    <div class="pw-txt">
                        <span>弱</span>
                        <span>中</span>
                        <span>强</span>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@Model.DisplayName(m => m.ConfirmNewPassword)</label>
                <div class="layui-input-inline">
                    <input type="password" name="@Model.NameOf(m => m.ConfirmNewPassword)" lay-verify="required|confirmPass" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">请再次确认您的输入密码</div>
            </div>
            <input type="text" class="layui-hide" name="@Model.NameOf(m => m.Id)" value="@Model.Id" />
            <input type="text" class="layui-hide" id="pwdstrong" value="" name="@Model.NameOf(m => m.PasswordStrongLevel)" />
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm changepassword" lay-submit="" lay-filter="changeAccountPassword">
                        <i class="layui-icon layui-icon-ok"></i>
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@await Component.InvokeAsync("ModelValidateError")
@section Scripts{
    <script src="~/lib/PearAdminLayui/component/layui/layui.js"></script>
    <script src="~/lib/PearAdminLayui/component/pear/pear.js"></script>
    <script src="~/dist/js/utils/passwordstrength.min.js"></script>
    <script src="~/dist/js/utils/frontendapiconfig.min.js" asp-append-version="true"></script>
    <script>
        layui.use(['form', 'jquery', 'http', 'button', 'laytpl'], function () {
            var form = layui.form,
                $ = layui.jquery,
                button = layui.button,
                http = layui.http,
                laytpl = layui.laytpl;

            //密码强度校验
            var $passwordEl = $("#newPassword");
            if ($passwordEl.length > 0) {
                var $weakEl = $("#pwdLevel_weak"),
                    $mediumEl = $("#pwdLevel_medium"),
                    $strongEl = $("#pwdLevel_strong"),
                    $pwdstronginputEl = $("#pwdstrong");
                $passwordEl.keyup(function () {
                    $weakEl.removeClass('pw-weak');
                    $mediumEl.removeClass('pw-medium');
                    $strongEl.removeClass('pw-strong');
                    var strength = PasswordStrength.test("", $(this).val());
                    if (strength.isWeak()) {
                        $weakEl.addClass('pw-weak');
                        $pwdstronginputEl.val("Weak");
                    } else if (strength.isGood()) {
                        $weakEl.addClass('pw-weak');
                        $mediumEl.addClass('pw-medium');
                        $pwdstronginputEl.val("Good");
                    } else if (strength.isStrong()) {
                        $weakEl.addClass('pw-weak');
                        $mediumEl.addClass('pw-medium');
                        $strongEl.addClass('pw-strong');
                        $pwdstronginputEl.val("Strong");
                    } else {
                        $pwdstronginputEl.val("Weak");
                    }
                    return true;
                });
            }

            form.verify({
                confirmPass: function (value) {
                    if ($('input[name=NewPassword]').val() !== value)
                        return '两次密码输入不一致！';
                }
            });
            form.on('submit(changeAccountPassword)', function (data) {
                var loadbtn = null,
                    modelData = data.field;

                $('.layui-input').removeAttr('failure');
                http.post(frontendapiConfig.customerChangePassword,
                    modelData,
                    function () { //beforeSend
                        loadbtn = button.load({
                            elem: '.changepassword',
                            time: 10000
                        });
                    }
                ).done(function (response) {
                    if (response.state && response.state === 200) {
                        layer.alert(response.message, {
                            title: "修改成功",
                            icon: 1,
                            closeBtn: 0,
                            end: function () {
                                http.ajax.handleTargetUrl(response.data.returnUrl);
                            }
                        });
                    }
                }).fail(function (error) {
                    //For ModelValidation
                    if (error.status && error.status === 400) {
                        var validator = error.responseJSON;
                        if (validator.ErrorCode && validator.ErrorCode === "FluentValidationError") {
                            var validateTpl = document.getElementById('validateResultTpl').innerHTML;
                            laytpl(validateTpl).render(validator, function (html) {
                                http.ajax.showError({
                                    message: '提示信息',
                                    details: html
                                });
                            });
                            //标红校验错误的数据框
                            layui.each(validator.Errors, function (index, item) {
                                var inputField = item.ErrorField;
                                $("input[name=" + inputField + "]").attr('failure', '');
                            });
                        }
                    }
                }).always(function () {
                    loadbtn.stop(function () { });
                });

                return false;
            });
        });
    </script>
}
